<template>
	<view class="content">
		<tai-card padding="64rpx">
			<view class="tai-card__content">
				<view class="u-font-xl">
					{{lockInfo.lockName}}
				</view>
				<!-- <view class="margin-top-lg">
					2024.07.12 12:33 - 2024.09.28:23:59
				</view> -->
				<view class="margin-top-xs">
					{{lockInfo.lockInfo.electricQuantity || 0}}%
				</view>
				<tai-lock size="300rpx" class="margin-top-xl" @click="unLock">
					<uni-icons type="locked" size="48"></uni-icons>
					<view class="">点击开锁</view>
				</tai-lock>
				<view class="lock-card__footer">
					<u-button type="primary" shape="circle" size="medium" plain @click="getSinglePwd">单次密码</u-button>
					<u-button type="primary" shape="circle" size="medium" plain @click="remoteUnlock">远程开锁</u-button>
				</view>
			</view>
		</tai-card>
		<tai-card margin="32rpx 0 0" padding="0">
			<view class="setting-item">
				<view class="icon-wrap">
					<uni-icons type="locked" size="24"></uni-icons>
				</view>
				<!-- <view class="u-font-xs">2024.07.12 12:33 - 2024.09.28:23:59</view> -->
				<u-button type="primary" shape="circle" size="mini" @click="openSettingpwd">设置密码</u-button>
			</view>
			<view class="setting-item">
				<view class="icon-wrap">
					<uni-icons type="locked" size="24"></uni-icons>
				</view>
				<!-- <view class="u-font-xs">2024.07.12 12:33 - 2024.09.28:23:59</view> -->
				<u-button type="primary" shape="circle" size="mini" @click="toFingerprintAdd">添加指纹</u-button>
			</view>
			<!-- <view class="setting-item">
				<view class="icon-wrap">
					<uni-icons type="locked" size="24"></uni-icons>
				</view>
				<view class="u-font-xs">2024.07.12 12:33 - 2024.09.28:23:59</view>
				<u-button type="primary" shape="circle" size="mini" @click="toIcCardAdd">添加房卡</u-button>
			</view> -->
		</tai-card>
		<u-modal v-model="show" :show-cancel-button="true" title="设置密码" negative-top="200"
			:title-style="{'padding-bottom': '32rpx', 'border-bottom': '1rpx solid #e4e7ed'}"
			@confirm="setPwd">
			<view class="setting-pwd">
				<u-field v-model="lockPwd" placeholder="输入密码" type="text"
					:error-message="false" :focus="true" :clearable="false" @click="lockPwdClick" />
			</view>
		</u-modal>
		<u-keyboard ref="uKeyboard" v-model="showKeyboard" :dot-enabled="false" mode="number" @change="keyBoardChange"
			@backspace="keyBoardBackspace" :mask="false" :tooltip="false">
		</u-keyboard>
		<u-popup v-model="showPwdPopup" mode="center" border-radius="16" width="600rpx">
			<view class="pwd-popup">
				<view class="pwd-popup__title">单次密码</view>
				<view class="pwd-popup__pwd">{{currentPwd}}</view>
				<view class="pwd-popup__tips">
					<view>密码请在6小时内使用</view>
					<view>在锁上输入密码后，按键盘右下角#号键或其他图标键开锁</view>
					<view class="pwd-popup__note">注：每个整点只能获取一个密码</view>
				</view>
				<view class="pwd-popup__btns">
					<u-button shape="circle" @click="showPwdPopup = false">关闭</u-button>
					<u-button type="primary" shape="circle" @click="copyPwd">复制密码</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import TaiCard from '@/components/tai-card/index.vue'
	import TaiLock from '@/components/tai-lock/index.vue'
	import { remoteUnlock, uploadQuantity, addPwd, getLockInfo, getRandomPwd } from '@/api/device/lock'
	import dayjs from 'dayjs'
	// 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',
				
	export default {
		components: {
			TaiCard,
			TaiLock
		},
		data() {
			return {
				show: false,
				showKeyboard: false,
				lockPwd: '',
				lockId: '',
				lockData: '',
				lockInfo: {},
				showPwdPopup: false,
				currentPwd: ''
			}
		},
		onLoad(params) {
			this.lockId = params.lockId;
			this.lockData = params.lockData;
			this.getLockInfo(params.lockId)
		},
		methods: {
			openSettingpwd() {
				this.show = true
				this.showKeyboard = true
			},
			// 设置密码输入框被点击
			lockPwdClick() {
				this.showKeyboard = true
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyBoardChange(value) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.lockPwd += value
			},
			// 退格键被点击
			keyBoardBackspace() {
				// 删除value的最后一个字符
				if(this.lockPwd.length) this.lockPwd = this.lockPwd.substr(0, this.lockPwd.length - 1);
			},
			// 获取锁信息
			getLockInfo(lockId) {
				getLockInfo(lockId).then(res => {
					this.lockInfo = res.data
					if (res.data.lockInfo) {
						this.lockInfo.lockInfo = JSON.parse(res.data.lockInfo)
					}
				})
			},
			// 获取单次密码
			getSinglePwd() {
				let params = {
					keyboardPwdType: 1,
					lockId: this.lockId,
					keyboardPwdName: '单次密码',
					startDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
				}
				getRandomPwd(this.lockId, params).then(res => {
					this.currentPwd = res.data.keyboardPwd;
					this.showPwdPopup = true;
				})
			},
			// 远程开锁
			remoteUnlock() {
				uni.showLoading({title: "开锁中"});
				remoteUnlock(this.lockId).then(res => {
					uni.hideLoading();
					uni.showToast({title: "开锁成功", icon: 'none'});
					console.log(res)
				})
			},
			unLock() {
				console.log("click unlock")
				uni.showLoading();
				requirePlugin("myPlugin", ({ controlLock }) => {
					// 蓝牙开锁
					controlLock({controlAction: 3, lockData: this.lockData }).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.showToast({title: res.errorMsg, icon: 'none'});
						if (res.errorCode == 0) {
							// 此处可以更新电量信息
							this.uploadQuantity(res.electricQuantity);
							console.log("电量：>>>", res.electricQuantity);
						}
					});
				});
			},
			// 去添加指纹页面
			toFingerprintAdd() {
				this.$tab.navigateTo(`/pages/home/lock-setting/fingerprintAdd?lockId=${this.lockId}&lockData=${this.lockData}`)
			},
			// 去添加房卡页面
			toIcCardAdd() {
				this.$tab.navigateTo('/pages/home/lock-setting/icCardAdd')
			},
			// 设置密码
			setPwd() {
				console.log(this.lockPwd);
				uni.showLoading({title: "添加中..."});
				requirePlugin("myPlugin", ({ createCustomPasscode }) => {
					// 设置密码
					createCustomPasscode({
						passcode: this.lockPwd,
						startDate: 0,
						endDate: 0,
						lockData: this.lockData,
					}).then(res => {
						console.log(res);
						
						if (res.errorCode == 0) {
							uni.hideLoading();
							uni.showToast({title: res.errorMsg, icon: 'none'});
							// 此处可以更新电量信息
							// 此处需要调用一下后台接口更新密码
							this.uploadQuantity(res.electricQuantity);
							console.log("电量：>>>", res.electricQuantity);
						} else {
							let params = {
								name: "用户名称",
								lockId: this.lockId,
								startDate: 0,
								endDate: 0,
								keyboardPwd: this.lockPwd,
							}
							addPwd(params).then(addRes => {
								uni.hideLoading();
								uni.showToast({title: "添加成功", icon: 'none'});
							})
						}
					});
					
				}, () => {
					uni.hideLoading();
				});
			},
			// 更新电量
			async uploadQuantity(electricQuantity) {
				let params = {
					lockId: this.lockId,
					electricQuantity
				}
				await uploadQuantity(this.lockId, params);
			},
			confirmPwd() {
				// 处理确认密码后的逻辑
				console.log("密码已确认:", this.currentPwd);
				this.showPwdPopup = false;
			},
			copyPwd() {
				uni.setClipboardData({
					data: this.currentPwd,
					success: () => {
						uni.showToast({
							title: '密码已复制',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx;
	}

	.tai-card__content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lock-card {
		&__footer {
			width: 100%;
			margin-top: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 48rpx;
		// border-bottom: 1rpx solid #ddd;
		box-shadow: 0 1rpx 1rpx #eee;

		&:last-child {
			border-bottom: unset;
			box-shadow: unset;
		}

		.icon-wrap {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 2px 1px #ccc;
		}
	}

	.pwd-popup {
		padding: 40rpx;
		
		&__title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		&__pwd {
			font-size: 48rpx;
			font-weight: bold;
			text-align: center;
			color: #2979ff;
			background-color: #f5f5f5;
			padding: 20rpx;
			border-radius: 8rpx;
			margin-bottom: 30rpx;
		}
		
		&__tips {
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
			margin-bottom: 30rpx;
		}
		
		&__note {
			color: #ff9900;
			margin-top: 10rpx;
		}
		
		&__btns {
			display: flex;
			gap: 20rpx;
			justify-content: flex-end;

			.u-button {
				flex: 1;
			}
		}
	}
</style>
